<template>
  <div class="approval-container">
    <h2>领取教材审核</h2>
    
    <table class="approval-table">
      <tbody>
        <tr v-for="(item, index) in tableData" :key="index">
          <th>{{ item.label }}</th>
          <td>
            <template v-if="item.label === '领取单位' && item.type === 'select'">
              <select v-model="textbook.department" class="form-select">
                <option value="">请选择部门</option>
                <option value="计算机系">计算机系</option>
                <option value="电子工程系">电子工程系</option>
                <option value="机械工程系">机械工程系</option>
                <option value="化学系">化学系</option>
                <option value="物理系">物理系</option>
              </select>
              
            </template>
            <template v-else>
              <input 
                v-model="textbook[item.prop]" 
                type="text" 
                class="form-input"
                :placeholder="item.placeholder || `请输入${item.label}`"
              />
            </template>
          </td>
        </tr>
      </tbody>
    </table>
    
    <div class="button-group">
      <button 
        @click="handleApprove" 
        class="action-button approve"
        :disabled="!textbook.id"
      >
        点击通过
      </button>
      
      <button 
        @click="handleReject" 
        class="action-button reject"
        :disabled="!textbook.id"
      >
        点击拒绝
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import { ElMessage } from 'element-plus';
import axios from 'axios';
// 教材信息响应式数据
const textbook = ref({
  id: null,
  courseId: '',
  courseName: '',
  department: '',
  class: '',
  teacher: '',
  major: '',
  bookCount: 0,
  teacherPhone: '',
  bookName: '',
  pickupTime: '',
  ISBN: '',
  courseIntro: ''
});

// 表格数据结构（新增type和prop字段）
const tableData = ref([
  { label: '课程号', value: '', type: 'input', prop: 'courseId' },
  { label: '课程名', value: '', type: 'input', prop: 'courseName' },
  { label: '领取单位', value: '', type: 'select', prop: 'department' },
  { label: '授课教师', value: '', type: 'input', prop: 'teacher' },
  { label: '授课专业', value: '', type: 'input', prop: 'major' },
  { label: '教材数', value: '', type: 'input', prop: 'bookCount' },
  { label: '教师联系方式', value: '', type: 'input', prop: 'teacherPhone' },
  { label: '教材名', value: '', type: 'input', prop: 'bookName' },
  { label: '预约领取时间', value: '', type: 'input', prop: 'pickupTime' },
  { label: 'IBSN', value: '', type: 'input', prop: 'ISBN' },
  { label: '课程简介', value: '', type: 'input', prop: 'courseIntro' }
]);

// 模拟数据加载
function fetchData() {
  axios.get('http://localhost:8000/textbook/getdata/')
  .then(res => {
    textbook.value=res.data.data[0]
    console.log(res)
  })
  .catch(err => {
    console.error(err); 
  })
  // textbook.value = {
  //   id: 1,
  //   courseId: '1001',
  //   courseName: '数据结构与算法',
  //   department: '计算机系',
  //   class: '计科2001',
  //   teacher: '张教授',
  //   major: '计算机科学与技术',
  //   bookCount: 30,
  //   teacherPhone: '13800138000',
  //   bookName: '《数据结构(C语言版)》',
  //   pickupTime: '2025-05-25',
  //   ISBN: '9787121345678',
  //   courseIntro: '本课程系统讲解常用数据结构和算法设计...'
  // };
}

// 审批处理函数（保持不变）
function handleApprove() {
  handleAction('approve');
}

function handleReject() {
  handleAction('reject');
}

function handleAction(action) {
  if (!textbook.value.id) {
    return ElMessage.warning('请先加载有效审核数据');
  }
  
  ElMessage.success(`${action === 'approve' ? '通过' : '拒绝'}操作成功`);
}

// 生命周期钩子（保持不变）
onMounted(() => {
  fetchData();
  
  watch(textbook, (newVal) => {
    if (newVal.id) {
      console.log('审核数据加载完成:', newVal.id);
    }
  }, { deep: true });
});
</script>

<style scoped>
.approval-container {
  padding: 30px 40px;
  max-width: 1200px;
  margin: 0 auto;
  background-color: #f8f9fa;
}

.approval-table {
  min-width: 800px;
  border-collapse: collapse;
  border: 1px solid #d1d5db;
}

.approval-table th {
  width: 180px;
  font-weight: 600;
  color: #333;
  background-color: #f0f2f5;
  padding: 14px 12px;
  text-align: left;
  border-bottom: 2px solid #c3c6cc;
}

.approval-table td {
  padding: 10px 12px;
  border-bottom: 2px solid #c3c6cc;
}

.form-input {
  width: 350px;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 15px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-input:focus {
  outline: none;
  border-color: #4a90e2;
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}

.form-select {
  width: 350px;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 15px;
  background-color: white;
  appearance: none;
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 15px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-select:focus {
  outline: none;
  border-color: #4a90e2;
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}

.button-group {
  margin-top: 30px;
  display: flex;
  gap: 18px;
}

.action-button {
  padding: 12px 30px;
  border-radius: 6px;
  font-size: 17px;
  transition: all 0.3s;
  cursor: pointer;
}

.approve {
  background-color: #4a90e2;
  color: white;
  border: none;
  box-shadow: 0 2px 8px rgba(74, 144, 226, 0.2);
}

.approve:hover {
  background-color: #357edd;
}

.reject {
  background-color: #ff5c5c;
  color: white;
  border: none;
  box-shadow: 0 2px 8px rgba(255, 92, 92, 0.2);
}

.reject:hover {
  background-color: #ff3b3b;
}

.action-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

</style>